<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XHR解密工具 - 统计面板</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #1e1e1e;
            color: #d4d4d4;
            margin: 0;
            padding: 20px;
        }

        .stats-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .title {
            color: #569cd6;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .subtitle {
            color: #9cdcfe;
            font-size: 14px;
        }

        /* 概览卡片 */
        .overview-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: #252526;
            border: 1px solid #3c3c3c;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
        }

        .stat-value {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .stat-label {
            color: #9cdcfe;
            font-size: 14px;
        }

        .success-rate {
            color: #4ec9b0;
        }

        .total-requests {
            color: #569cd6;
        }

        .avg-time {
            color: #dcdcaa;
        }

        .active-algorithm {
            color: #c586c0;
        }

        /* 图表区域 */
        .charts-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }

        .chart-container {
            background: #252526;
            border: 1px solid #3c3c3c;
            border-radius: 8px;
            padding: 20px;
        }

        .chart-title {
            color: #569cd6;
            font-size: 16px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .chart-title::before {
            content: '📊';
            margin-right: 8px;
        }

        .chart-placeholder {
            height: 200px;
            background: #2d2d2d;
            border: 2px dashed #3c3c3c;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9cdcfe;
            font-size: 14px;
        }

        /* 详细统计表格 */
        .details-section {
            background: #252526;
            border: 1px solid #3c3c3c;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .section-title {
            color: #569cd6;
            font-size: 18px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .section-title::before {
            content: '📋';
            margin-right: 8px;
        }

        .stats-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .stats-table th,
        .stats-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #3c3c3c;
        }

        .stats-table th {
            background: #2d2d2d;
            color: #569cd6;
            font-weight: bold;
        }

        .stats-table tr:hover {
            background: #2d2d2d;
        }

        /* 操作按钮 */
        .actions {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .btn {
            background: #569cd6;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .btn:hover {
            background: #4ec9b0;
        }

        .btn-secondary {
            background: #3c3c3c;
        }

        .btn-secondary:hover {
            background: #4c4c4c;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .charts-section {
                grid-template-columns: 1fr;
            }

            .overview-cards {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
    </style>
</head>

<body>
    <div class="stats-container">
        <div class="header">
            <div class="title">🔍 XHR解密工具 - 统计面板</div>
            <div class="subtitle">实时监控解密性能和效果</div>
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
            <button class="btn" onclick="refreshStats()">🔄 刷新统计</button>
            <button class="btn btn-secondary" onclick="exportStats()">📤 导出数据</button>
            <button class="btn btn-secondary" onclick="clearStats()">🗑️ 清空统计</button>
            <button class="btn btn-secondary" onclick="resetStats()">🔄 重置统计</button>
        </div>

        <!-- 概览卡片 -->
        <div class="overview-cards">
            <div class="stat-card">
                <div class="stat-value success-rate" id="successRate">0%</div>
                <div class="stat-label">解密成功率</div>
            </div>
            <div class="stat-card">
                <div class="stat-value total-requests" id="totalRequests">0</div>
                <div class="stat-label">总请求数</div>
            </div>
            <div class="stat-card">
                <div class="stat-value avg-time" id="avgTime">0ms</div>
                <div class="stat-label">平均解密时间</div>
            </div>
            <div class="stat-card">
                <div class="stat-value active-algorithm" id="activeAlgorithm">雪花算法</div>
                <div class="stat-label">当前算法</div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="charts-section">
            <div class="chart-container">
                <div class="chart-title">解密成功率趋势</div>
                <div class="chart-placeholder" id="successRateChart">
                    图表区域 - 显示最近24小时的解密成功率变化
                </div>
            </div>
            <div class="chart-container">
                <div class="chart-title">算法使用分布</div>
                <div class="chart-placeholder" id="algorithmChart">
                    饼图 - 显示各解密算法的使用频率
                </div>
            </div>
        </div>

        <!-- 详细统计 -->
        <div class="details-section">
            <div class="section-title">算法性能统计</div>
            <table class="stats-table">
                <thead>
                    <tr>
                        <th>算法名称</th>
                        <th>使用次数</th>
                        <th>成功次数</th>
                        <th>成功率</th>
                        <th>平均耗时</th>
                        <th>最后使用</th>
                    </tr>
                </thead>
                <tbody id="algorithmStats">
                    <tr>
                        <td>雪花算法</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0%</td>
                        <td>0ms</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>冒泡算法</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0%</td>
                        <td>0ms</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>线性算法</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0%</td>
                        <td>0ms</td>
                        <td>-</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 域名统计 -->
        <div class="details-section">
            <div class="section-title">域名统计</div>
            <table class="stats-table">
                <thead>
                    <tr>
                        <th>域名</th>
                        <th>请求数</th>
                        <th>解密成功</th>
                        <th>成功率</th>
                        <th>主要算法</th>
                    </tr>
                </thead>
                <tbody id="domainStats">
                    <tr>
                        <td colspan="5" style="text-align: center; color: #9cdcfe;">
                            暂无数据
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 错误分析 -->
        <div class="details-section">
            <div class="section-title">错误分析</div>
            <table class="stats-table">
                <thead>
                    <tr>
                        <th>错误类型</th>
                        <th>出现次数</th>
                        <th>占比</th>
                        <th>最近出现</th>
                    </tr>
                </thead>
                <tbody id="errorStats">
                    <tr>
                        <td colspan="4" style="text-align: center; color: #9cdcfe;">
                            暂无错误记录
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="stats-panel.js"></script>
</body>

</html>